<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-title">
        <text class="title-icon">🛒</text>
        <text class="title-text">美食选购</text>
      </view>
      <text class="subtitle">精选美味，一键下单</text>
    </view>

    <!-- 菜品列表 -->
    <view class="menu-container" v-if="dishList.length > 0">
      <view class="dish-grid">
        <view
            class="dish-card"
            v-for="(dish, index) in dishList"
            :key="dish.id"
            :class="{'selected': selectedDishes[dish.id]}"
        >
          <view class="dish-image-container">
            <image :src="dish.image" class="dish-image" mode="aspectFill" />
            <view class="dish-badge" v-if="selectedDishes[dish.id]">
              <text class="badge-text">{{selectedDishes[dish.id].quantity}}</text>
            </view>
          </view>

          <view class="dish-content">
            <text class="dish-name">{{dish.name}}</text>
            <view class="dish-price-row">
              <text class="dish-price">¥{{dish.price}}</text>
            </view>

            <view class="quantity-controls">
              <button
                  class="quantity-btn minus-btn"
                  @click="decreaseQuantity(dish)"
                  :disabled="!selectedDishes[dish.id]"
              >
                <text class="btn-icon">➖</text>
              </button>

              <text class="quantity-display">
                {{selectedDishes[dish.id] ? selectedDishes[dish.id].quantity : 0}}
              </text>

              <button
                  class="quantity-btn plus-btn"
                  @click="increaseQuantity(dish)"
              >
                <text class="btn-icon">➕</text>
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <text class="empty-icon">🍽️</text>
      <text class="empty-title">暂无菜品</text>
      <text class="empty-subtitle">请先在菜品管理页面添加菜品</text>
      <button class="goto-add-btn" @click="gotoAddPage">
        <text class="btn-text">去添加菜品</text>
      </button>
    </view>

    <!-- 购物车底部栏 -->
    <view class="cart-bottom" v-if="totalQuantity > 0">
      <view class="cart-info" @click="toggleCartDetail">
        <view class="cart-icon-container">
          <text class="cart-icon">🛒</text>
          <view class="cart-count">{{totalQuantity}}</view>
        </view>
        <view class="cart-text">
          <text class="cart-title">已选 {{totalQuantity}} 件</text>
          <text class="cart-subtitle">点击查看详情</text>
        </view>
      </view>

      <view class="cart-total">
        <text class="total-label">总计:</text>
        <text class="total-price">¥{{totalPrice}}</text>
      </view>

      <button class="checkout-btn" @click="checkout">
        <text class="checkout-text">立即下单</text>
      </button>
    </view>

    <!-- 购物车详情弹窗 -->
    <view class="cart-detail-overlay" v-if="showCartDetail" @click="toggleCartDetail">
      <view class="cart-detail-popup" @click.stop>
        <view class="cart-detail-header">
          <text class="cart-detail-title">购物车详情</text>
          <text class="close-btn" @click="toggleCartDetail">✕</text>
        </view>

        <scroll-view class="cart-detail-content" scroll-y>
          <view
              class="cart-item"
              v-for="item in selectedDishesArray"
              :key="item.id"
          >
            <image :src="item.image" class="cart-item-image" mode="aspectFill" />
            <view class="cart-item-info">
              <text class="cart-item-name">{{item.name}}</text>
              <text class="cart-item-price">¥{{item.price}} × {{item.quantity}}</text>
            </view>
            <text class="cart-item-total">¥{{(parseFloat(item.price) * item.quantity).toFixed(2)}}</text>
          </view>
        </scroll-view>

        <view class="cart-detail-footer">
          <view class="detail-total">
            <text class="detail-total-text">总计: ¥{{totalPrice}}</text>
          </view>
          <button class="detail-checkout-btn" @click="checkout">
            <text>确认下单</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dishList: [],
      selectedDishes: {},
      showCartDetail: false
    }
  },

  computed: {
    selectedDishesArray() {
      return Object.values(this.selectedDishes);
    },

    totalQuantity() {
      return this.selectedDishesArray.reduce((total, dish) => total + dish.quantity, 0);
    },

    totalPrice() {
      const total = this.selectedDishesArray.reduce((sum, dish) => {
        return sum + (parseFloat(dish.price) * dish.quantity);
      }, 0);
      return total.toFixed(2);
    }
  },

  onLoad() {
    this.loadDishList();
  },

  onShow() {
    this.loadDishList();
  },

  methods: {
    // 从本地存储加载菜品列表
    loadDishList() {
      try {
        const storedList = uni.getStorageSync('dishList');
        if (storedList) {
          this.dishList = JSON.parse(storedList);
        } else {
          this.dishList = [];
        }
      } catch (e) {
        console.error('加载菜品列表失败', e);
        this.dishList = [];
      }
    },

    // 增加数量
    increaseQuantity(dish) {
      if (this.selectedDishes[dish.id]) {
        this.selectedDishes[dish.id].quantity++;
      } else {
        this.$set(this.selectedDishes, dish.id, {
          ...dish,
          quantity: 1
        });
      }
    },

    // 减少数量
    decreaseQuantity(dish) {
      if (this.selectedDishes[dish.id]) {
        if (this.selectedDishes[dish.id].quantity > 1) {
          this.selectedDishes[dish.id].quantity--;
        } else {
          this.$delete(this.selectedDishes, dish.id);
        }
      }
    },

    // 切换购物车详情显示
    toggleCartDetail() {
      this.showCartDetail = !this.showCartDetail;
    },

    // 结账
    checkout() {
      if (this.totalQuantity === 0) {
        uni.showToast({
          title: '请先选择菜品',
          icon: 'error'
        });
        return;
      }

      const orderInfo = {
        dishes: this.selectedDishesArray,
        totalQuantity: this.totalQuantity,
        totalPrice: this.totalPrice,
        orderTime: new Date().toLocaleString()
      };

      uni.showModal({
        title: '确认下单',
        content: `共 ${this.totalQuantity} 件商品，总计 ¥${this.totalPrice}`,
        success: (res) => {
          if (res.confirm) {
            // 清空购物车
            this.selectedDishes = {};
            this.showCartDetail = false;

            uni.showToast({
              title: '下单成功！',
              icon: 'success'
            });

            // 这里可以添加保存订单的逻辑
            console.log('订单信息：', orderInfo);
          }
        }
      });
    },

    // 跳转到添加页面
    gotoAddPage() {
      uni.switchTab({
        url: '/pages/menu-add/menu-add'
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 180rpx;
}

/* 头部样式 - 电商风格 */
.header {
  background: #fff;
  padding: 40rpx 30rpx 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;

  .header-title {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;

    .title-icon {
      font-size: 48rpx;
      margin-right: 20rpx;
      color: #FF6B35;
    }

    .title-text {
      font-size: 42rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .subtitle {
    font-size: 26rpx;
    color: #999;
    padding-left: 68rpx;
  }
}

/* 商品列表 - 电商卡片风格 */
.menu-container {
  padding: 30rpx 20rpx;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.dish-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
  position: relative;

  &.selected {
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.15);
    border: 1rpx solid rgba(255, 107, 53, 0.3);
  }
}

.dish-image-container {
  position: relative;
  height: 280rpx;
  overflow: hidden;

  .dish-image {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
  }

  &:hover .dish-image {
    transform: scale(1.05);
  }

  .dish-badge {
    position: absolute;
    top: 15rpx;
    right: 15rpx;
    width: 50rpx;
    height: 50rpx;
    background: #FF6B35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

    .badge-text {
      color: white;
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}

.dish-content {
  padding: 24rpx;

  .dish-name {
    display: block;
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 18rpx;
    height: 80rpx;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dish-price-row {
    margin-bottom: 25rpx;

    .dish-price {
      font-size: 36rpx;
      font-weight: bold;
      color: #FF6B35;
    }
  }

  .quantity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .quantity-btn {
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      transition: all 0.2s ease;
      position: relative;

      &.minus-btn {
        background: #f5f5f5;
        color: #666;

        &[disabled] {
          opacity: 0.4;
        }

        &:active:not([disabled]) {
          background: #e0e0e0;
        }
      }

      &.plus-btn {
        background: linear-gradient(135deg, #FF6B35, #F7931E);
        color: white;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);

        &:active {
          transform: scale(0.95);
          box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.2);
        }
      }

      .btn-icon {
        font-size: 24rpx;
      }
    }

    .quantity-display {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      min-width: 60rpx;
      text-align: center;
    }
  }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 150rpx 60rpx;
  color: #666;

  .empty-icon {
    font-size: 120rpx;
    display: block;
    margin-bottom: 30rpx;
    color: #ccc;
  }

  .empty-title {
    font-size: 34rpx;
    font-weight: 600;
    display: block;
    margin-bottom: 15rpx;
  }

  .empty-subtitle {
    font-size: 28rpx;
    color: #999;
    display: block;
    margin-bottom: 40rpx;
  }

  .goto-add-btn {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    color: white;
    border-radius: 50rpx;
    width: 60%;
    margin: 0 auto;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);

    .btn-text {
      font-weight: 500;
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

/* 购物车底部栏 - 电商风格 */
.cart-bottom {
  position: fixed;
  bottom: 50rpx;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 100;

  .cart-info {
    display: flex;
    align-items: center;
    flex: 1;

    .cart-icon-container {
      position: relative;
      margin-right: 20rpx;

      .cart-icon {
        font-size: 50rpx;
        color: #FF6B35;
      }

      .cart-count {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background: #FF6B35;
        color: white;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
      }
    }

    .cart-text {
      .cart-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        display: block;
      }

      .cart-subtitle {
        font-size: 24rpx;
        color: #999;
        display: block;
      }
    }
  }

  .cart-total {
    margin: 0 30rpx;
    text-align: right;

    .total-label {
      font-size: 26rpx;
      color: #666;
      display: block;
    }

    .total-price {
      font-size: 34rpx;
      font-weight: bold;
      color: #FF6B35;
    }
  }

  .checkout-btn {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    color: white;
    border-radius: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    font-weight: 500;
    padding: 0 40rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);
    transition: all 0.2s ease;

    .checkout-text {
      font-weight: 500;
    }

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.2);
    }
  }
}

/* 购物车详情弹窗 - 电商风格 */
.cart-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.cart-detail-popup {
  width: 100%;
  max-height: 70vh;
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;

  .cart-detail-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;

    .cart-detail-title {
      font-size: 34rpx;
      font-weight: bold;
      color: #333;
    }

    .close-btn {
      font-size: 36rpx;
      color: #999;
      padding: 20rpx;
    }
  }

  .cart-detail-content {
    flex: 1;
    padding: 20rpx 30rpx;
    max-height: 50vh;

    .cart-item {
      display: flex;
      align-items: center;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      .cart-item-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 25rpx;
      }

      .cart-item-info {
        flex: 1;

        .cart-item-name {
          font-size: 30rpx;
          color: #333;
          display: block;
          margin-bottom: 10rpx;
          font-weight: 500;
        }

        .cart-item-price {
          font-size: 26rpx;
          color: #999;
        }
      }

      .cart-item-total {
        font-size: 32rpx;
        font-weight: bold;
        color: #FF6B35;
        min-width: 120rpx;
        text-align: right;
      }
    }
  }

  .cart-detail-footer {
    padding: 25rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    border-top: 1rpx solid #eee;

    .detail-total {
      .detail-total-text {
        font-size: 34rpx;
        font-weight: bold;
        color: #FF6B35;
      }
    }

    .detail-checkout-btn {
      background: linear-gradient(135deg, #FF6B35, #F7931E);
      color: white;
      border-radius: 40rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      padding: 0 40rpx;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);

      &:active {
        transform: scale(0.98);
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>